<template>
  <div class="main">
    <HeadContent title="更新密码"></HeadContent>
    <TagComtent></TagComtent>

    <div class="content">
      <TitleContent :img="imgValue" title-name="填写休假信息" />
      <div class="content-le">
        <el-row>
          <el-col :span="12">

            <el-form :model="form" label-width="auto">
              <el-form-item>
                <div class="block">
                  <span class="demonstration">日期</span>
                  <el-date-picker v-model="value1" type="daterange" range-separator="To" start-placeholder="起始日期"
                    end-placeholder="结束日期" />
                </div>
              </el-form-item>
              <el-form-item label="Zones">
                <el-select v-model="form.region" placeholder="修改日期类型">
                  <el-option label="工作日" value="shanghai" />
                  <el-option label="休息日" value="beijing" />
                </el-select>
              </el-form-item>

              <!-- 固定天数 从后端传输 如果剩余天数大于想请假天数true -->
              <el-form-item label="Activity form" prop="desc">
                <el-input v-model="ruleForm.desc" type="text" />
              </el-form-item>
              <el-form-item label="Activity form" prop="desc">
                <el-input v-model="ruleForm.desc" type="textarea" />
              </el-form-item>
              <!-- 提交  判断如果有未填写信息直接 -->
              <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                  提交
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
              </el-form-item>

            </el-form>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import TitleContent from '@/components/TitleContent.vue'
import TagComtent from '@/components/TagComtent.vue'
import imgValue from '@/assets/svg/password.svg'
import { ref, reactive } from 'vue'
import HeadContent from '@/components/HeadContent.vue'


const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
const value1 = ref('')




interface RuleForm {
  name: string
  region: string
  count: string
  date1: string
  date2: string
  delivery: boolean
  location: string
  type: string[]
  resource: string
  desc: string
}

const ruleForm = reactive<RuleForm>({
  name: 'Hello',
  region: '',
  count: '',
  date1: '',
  date2: '',
  delivery: false,
  location: '',
  type: [],
  resource: '',
  desc: '',
})

// 定义表单校验规则

import type {  FormInstance, } from 'element-plus'

const ruleFormRef = ref<FormInstance>()

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  background-color: #eeeeee;

  .block {
    margin-left: 6vh;
  }

  .demonstration {
    margin-right: 2vh;
  }

  h1 {
    font-size: 30px;
  }

  .nav {
    height: 30px;
    margin: 30px 0;
    border: 1px solid #dedddd;
  }

  .content {
    box-shadow: var(--el-box-shadow-light);
    // padding: 20px;
    // background-color: pink;
    height: fit-content;
    border: 1px solid #dedddd;

    .content-le {
      padding: 40px 0 0 30px;
      border: 1px solid #dedddd;
    }
  }
}
</style>
